<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    li{
        display: inline;
        position: inherit;
    }


    div{
        width: 100%;
        text-align: center;
    }

    #btn{
        margin: 0 auto;
    }
    #re{
        position: inherit;;
        top: 20px;
        left: 100px;
    }

        #section1{
            background-color: #58C4E6;
            float: left;
            width: 20%;
        }
        #section2{
            background-color: #dedede;
            margin-left: 20%;
        }
    .vertical-container {
        height: 300px;
        display: -webkit-flex;
        display:         flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>

</ul>

<div id="content">
    <button id="btn">click</button>
</div>
<div id="re">
    123
</div>

<section>
    <section id="section1">div1</section>
    <section id="section2">div2</section>
</section>

<div class="vertical-container">
    <p>终于居中了</p>
</div>
</body>
</html>